<template>
  <div class="triangle" :style="style"></div>
</template>

<script lang="ts" setup>
import { ref } from "vue"

const props = defineProps({
  size: {
    type: Number,
    required: true
  },
  color: {
    type: String,
    required: true
  }
})

const style = ref({
  borderWidth: `0 ${props.size / 2}px ${props.size * 0.866}px ${props.size / 2}px`,
  borderColor: `transparent transparent ${props.color} transparent`
})
</script>

<style scoped lang="scss">
.triangle {
  width: 0;
  height: 0;
  border-style: solid;
}
</style>
